<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>My Route</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Estilos -->
        <link href="../css/myroute.css" rel="stylesheet">
        <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
        <!--SCRIPTS-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="../js/PesquisaDeRota.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.dropdown-toggle').dropdown();
            });
            $('#destino').live("keyup", function(event) {
                if(event.keyCode == '13'){
                    $('#btnSearch').click();
                }
            });
        </script>


    </head>

    <body>
        <div class="navbar navbar"> <!--Inicio Navbar-->
            <div class="navbar-inner">
                <div class="container">
                    <img class="logoprofile" src="../imagens/my.route2.png">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <ul class="nav pull-left">
                        <li class="divider-vertical"></li>
                    </ul>
                    <div class="nav-collapse collapse navbar-responsive-collapse">
                        <ul class="nav">
                            <li><a href="#"><i class="icon-home"></i> Home</a></li>

                        </ul>

                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Meu Perfil<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Atualizar Cadastro</a></li>
                                    <li><a href="#">Preferências</a></li>
                                    <li><a href="#">Alterar o Tema</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Logout</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div><!-- /navbar-inner -->
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <div class="sidebar-nav">
                        <div>
                            <img class="img-rounded fotologin" src="../imagens/fotoUser/g.JPG">
                        </div>

                        <div class="accordion" id="carregafoto">
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#carregafoto" href="#formupload">
                                        <center>Adicione uma foto...</center>
                                    </a>
                                </div>
                                <div id="formupload" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                        <form enctype="multipart/form-data" action="image.php" method="POST">
                                            <input type="hidden" name="MAX_FILE_SIZE" value="300000" />
                                            <input name="userfile" type="file" size="25"/>
                                            <p></p>
                                            <center>
                                                <input class="btn btn-primary" type="submit" value="Upload" />
                                            </center>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#"><i class="icon-user pull-left"></i>&nbsp Amigos</a></li>
                            <li><a href="#"><i class="icon-film pull-left"></i>&nbsp Media</a></li>
                            <li class="active"><a href="#"><i class="icon-globe pull-left"></i>&nbsp Mapas</a></li>
                            <li><a href="#"><i class="icon-star pull-left"></i>&nbsp Favoritos</a></li>
                            <li><a href="#"><i class="icon-road pull-left"></i>&nbsp Caronas</a></li>
                        </ul>
                    </div>
                </div>

                <div class="span9">
                    <div class="well accordion" id="carregamapa">
                        <h3>Nova Rota</h3>
                        <form class="form-inline" id="form" method="post">
                            <input name="origem" id="origem" type="text" placeholder="Origem...">    
                            <input name="destino" id="destino"type="text" placeholder="Destino...">
                            <br>
                            <div>&nbsp;</div>
                            <button id="btnSearch" class="btn btn-success btn-large" data-toggle="collapse" data-parent="#carregamapa" href="#mapa" type="button" onclick="geraMapa()">Buscar Rota</button>
                        </form>
                        <div id="mapa" class="accordion-body collapse">
                            <div style="width: 800px;">
                                <div id="map" style="width: 800px; height: 500px; float: left;"></div> 
                                <div id="panel" style="width: 800px; float: right;"></div> 
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <!--
                <footer class="footer">
                    <p>&copy; My Route</p>
                </footer>-->

        <!-- Javascript-->
        <script src="../bootstrap/js/jquery.js"></script>
        <script src="../bootstrap/js/bootstrap-transition.js"></script>
        <script src="../bootstrap/js/bootstrap-collapse.js"></script>
        <script src="../bootstrap/js/bootstrap-alert.js"></script>
        <script src="../bootstrap/js/bootstrap-modal.js"></script>
        <script src="../bootstrap/js/bootstrap-dropdown.js"></script>
        <script src="../bootstrap/js/bootstrap-button.js"></script>
        <script src="../bootstrap/js/dropdown.js"></script>
        <script src="../bootstrap/js/bootstrap-scrollspy.js"></script>
        <script src="../bootstrap/js/bootstrap-tab.js"></script>
        <script src="../bootstrap/js/bootstrap-tooltip.js"></script>
        <script src="../bootstrap/js/bootstrap-affix.js"></script>

    </body>
</html>